<!DOCTYPE html>
<html>
	<head>
		<title>D3 Tutorial Test14 Cluster Pack Bubble Layouts</title>
		<script src="d3.min.js"></script>
	</head>
	<body>
	
		<script type="text/javascript">
		
		var width = 800;
		var height = 600;
		
		var canvas = d3.select("body")
						.append("svg")
						.attr("width", width) 
						.attr("height", height)
						.append("g")
							.attr("transform", "translate(50, 50)");
		
		var pack = d3.layout.pack()
								.size([width, height - 50])
								.padding(10);
		
		d3.json("clusterdata.json", function(data) {
			
			var nodes = pack.nodes(data);
			//console.log(nodes);
			var node = canvas.selectAll(".node")
								.data(nodes)
								.enter()
									.append("g")
										.attr("class", "node")
										.attr("transform", function(d) { return "translate(" + d.x + ", " + d.y + ")"; });
			
			node.append("circle")
					.attr("r", function(d) { return d.r; })
					.attr("fill", "steelblue")
					.attr("opacity", 0.25)
					.attr("stroke", "#ADADAD")
					.attr("stroke-width", "2");
			
			node.append("text")
					.text(function(d) { 
						
						if(d.children) {
							return "";
						} else {
							return d.name;
						}
					});
			
		});
		
										
		</script>
	</body>
</html>
